<!-- 修改 src/views/system/phone1/index.vue -->
<template>
  <div class="appointment-page">
    <!-- 背景渐变 -->
    <div class="background-gradient"></div>

    <!-- 主要内容容器 -->
    <div class="container">
      <!-- 预约服务卡片 -->
      <div class="appointment-card">
        <!-- 标题 -->
        <h2 class="title">预约服务</h2>

        <!-- 副标题 -->
        <p class="subtitle">请输入预约码进行预约</p>

        <!-- 预约码输入框 -->
        <div class="input-group">
          <label class="label">预约码</label>
          <el-input
            v-model="appointmentCode"
            placeholder="请输入预约码"
            clearable
            @keyup.enter.native="handleAppointment"
            class="input-field"
            :disabled="loading"
          />
        </div>

        <!-- 立即预约按钮 -->
        <el-button
          type="primary"
          size="medium"
          @click="handleAppointment"
          class="appointment-btn"
          :loading="loading"
        >
          {{ loading ? '预约中...' : '立即预约' }}
        </el-button>

        <!-- 查询运单链接 -->
        <div class="query-section">
          <p class="query-text">已有预约码？</p>
          <el-link
            type="primary"
            @click="handleQuery"
            class="query-link"
          >
            查询已预约运单
          </el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: "AppointmentPage",
  data() {
    return {
      appointmentCode: "",
      loading: false
    }
  },
  methods: {
    // 处理预约操作
    async handleAppointment() {
      if (!this.appointmentCode.trim()) {
        this.$message.warning("请输入预约码")
        return
      }

      this.loading = true
      try {
        // 调用预约接口
        const response = await request({
          url: '/appointment/book',
          method: 'post',
          data: {
            code: this.appointmentCode.trim()
          }
        })

        this.$message.success("预约成功！")
        // 预约成功后跳转到运单详情页面
        this.$router.push({
          path: "/phone1/order-detail",
          query: { code: this.appointmentCode.trim() }
        })
      } catch (error) {
        console.error("预约失败:", error)
        this.$message.error(error.message || "预约失败，请重试")
      } finally {
        this.loading = false
      }
    },

    // 处理查询运单操作
    handleQuery() {
      // 直接跳转到运单详情页面进行查询
      if (this.appointmentCode.trim()) {
        this.$router.push({
          path: "/phone1/order-detail",
          query: { code: this.appointmentCode.trim() }
        })
      } else {
        this.$message.warning("请输入预约码")
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* 样式保持不变 */
.appointment-page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 1;
  }

  .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    padding: 20px;
  }
}

.appointment-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 20px;

  @media (max-width: 480px) {
    padding: 20px;
    margin: 15px;
  }
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;

  @media (max-width: 480px) {
    font-size: 20px;
  }
}

.subtitle {
  color: #666;
  font-size: 14px;
  margin-bottom: 30px;

  @media (max-width: 480px) {
    font-size: 13px;
  }
}

.input-group {
  margin-bottom: 20px;

  .label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
  }

  .input-field {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;

    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }
  }
}

.appointment-btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }

  &:active {
    transform: translateY(0);
  }

  @media (max-width: 480px) {
    height: 44px;
    font-size: 15px;
  }
}

.query-section {
  margin-top: 20px;
  text-align: center;

  .query-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }

  .query-link {
    font-size: 14px;
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;

    &:hover {
      color: #4a59c8;
    }
  }
}

// 移动端适配
@media (max-width: 480px) {
  .appointment-card {
    padding: 20px;
    margin: 15px;
  }

  .title {
    font-size: 20px;
  }

  .subtitle {
    font-size: 13px;
  }

  .input-group {
    .label {
      font-size: 13px;
    }
  }

  .appointment-btn {
    height: 44px;
    font-size: 15px;
  }

  .query-text {
    font-size: 13px;
  }

  .query-link {
    font-size: 13px;
  }
}
</style>
